<template>
  <div>
    <PageTools>
      <template #before>
        <el-button type="primary" @click="isShowCate = true">新增分类</el-button>
      </template>

      <template #after>
        <el-input v-model="pageConfig.title_contains" placeholder="请输入关键词" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="searchCate" />
        </el-input>
      </template>

      <template #main>
        <el-table
          border
          style="width: 100%"
          :data="cateList"
        >
          <el-table-column
            prop="image"
            label="图片"
          >
            <template #default="{row}">
              <img :src="row.image" alt="" style="width:150px;height:100px">
            </template>
          </el-table-column>
          <el-table-column
            prop="title"
            label="标题"
            width="180"
          />
          <el-table-column
            prop="desc"
            label="介绍"
            width="500"
          />
          <el-table-column label="操作" width="150">
            <template #default="{row}">
              <el-button size="small" type="primary" @click="editCate(row.id)">编辑</el-button>
              <el-button size="small" type="danger" @click="delCate(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>

      <!-- 分页组件 -->
      <template #footer>
        <el-pagination
          small
          layout="prev, pager, next"
          :total="total"
          :page-size="pageConfig._limit"
          :current-page.sync="currentPage"
          @current-change="currentChange"
        />
      </template>
    </PageTools>

    <!-- 编辑弹窗 -->
    <el-dialog
      :title="cateForm.id?'编辑分类':'新增分类'"
      :visible="isShowCate"
      center
      @close="btnCateCancel"
    >
      <!-- form表单 -->
      <el-form ref="cateForm" :model="cateForm" :rules="rules" label-width="80px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="cateForm.title" />
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <el-input
            v-model="cateForm.desc"
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
          />
        </el-form-item>
        <el-form-item label="封面" prop="image">
          <ImageUpload ref="ImgUp" :type="'image'" />
        </el-form-item>
      </el-form>
      <!-- 确定 取消 按钮 -->
      <el-row slot="footer">
        <el-button type="primary" size="small" @click="btnCateOK">确定</el-button>
        <el-button size="small" @click="btnCateCancel">取消</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { getCate, getCateList, editCate, addCate, delCate, getAllCate } from '@/api/categories'
// 上传文件组件
export default {
  data() {
    return {
      cateList: [],
      isShowCate: false,
      pageConfig: {
        _start: 0,
        _limit: 2,
        title_contains: ''
      },
      total: 0,
      currentPage: 1,
      cateForm: {
        image: '',
        title: '',
        desc: ''
      },
      rules: {
        title: [
          { required: true, message: '该项不能为空', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '该项不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getCate()
    this.getAllCate()
  },
  methods: {
    // 分页
    currentChange(newPage) {
      this.getCate()
      this.pageConfig._start = this.pageConfig._limit * (newPage - 1)
      // console.log('130', newPage)
    },
    // 获取全部数据
    async getAllCate() {
      const { data } = await getAllCate(this.pageConfig)
      // console.log('137', count)
      this.total = data
    },
    // 分类列表数据，渲染页面
    async getCate() {
      const { data } = await getCate(this.pageConfig)
      this.cateList = data
    },
    // 编辑分类
    // 数据回显
    async editCate(id) {
      // 回显
      // 获取分类列表数据
      const { data } = await getCateList(id)
      this.cateForm = data
      // console.log(this.cateForm)
      this.isShowCate = true
      this.$nextTick(() => {
        this.$refs.ImgUp.fileList = [{
          url: this.cateForm.image
        }]
      })
    },
    // 确认按钮
    async btnCateOK() {
      // 校验
      await this.$refs.cateForm.validate()
      // console.log('151', this.cateForm)
      const fileList = this.$refs.ImgUp.fileList
      // 发送请求
      if (this.cateForm.id) {
        await editCate(
          {
            ...this.cateForm,
            image: fileList[0].url
          }
        )
      } else {
        await addCate(
          {
            ...this.cateForm,
            image: fileList[0] ? fileList[0].url : ''
          }
        )
      }
      // 提示用户
      this.$message.success('操作成功')
      // 关闭弹窗
      this.isShowCate = false
      // 更新页面
      this.getCate()
      this.getAllCate()
    },
    // 取消按钮
    btnCateCancel() {
      // 清除校验
      this.$refs.cateForm.resetFields()
      // 清除数据
      this.cateForm = {}
      this.$refs.ImgUp.fileList = []
      this.isShowCate = false
    },
    // 删除分类
    async delCate(id) {
      // 二次询问
      await this.$confirm('是否确认删除')
      // 发起请求
      await delCate(id)
      if (this.cateList.length === 1 && this.pageConfig._start >= 1) {
        this.pageConfig._start = this.pageConfig._start - this.pageConfig._limit
        this.currentPage--
      }
      // 刷新页面
      await this.getCate()
      await this.getAllCate()
    },
    // 搜索
    async searchCate() {
      this.pageConfig._start = 0
      this.currentPage = 1
      const { data } = await getCate(this.pageConfig)
      this.cateList = data
      // console.log(data)
      // this.key = {}
      this.getAllCate(this.pageConfig.title_contains)
    }
  }
}
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

<style lang="scss" scoped>
::v-deep img {
  object-fit: cover;
}
.disable{
    ::v-deep .el-upload--picture-card{
    display: none
}
}
</style>
